import { defineComponent, h } from 'vue'
import type { App } from 'vue'
import * as Icons from '@arco-design/web-vue/es/icon'

// 创建图标组件映射
const iconMap = new Map<string, unknown>()

// 注册所有图标到 Map 中
Object.entries(Icons).forEach(([key, component]) => {
  if (key.startsWith('Icon')) {
    // 将驼峰命名转换为短横线命名
    const iconName = key
      .replace(/([A-Z])/g, '-$1')
      .toLowerCase()
      .replace(/^-/, '')
    iconMap.set(iconName, component)
  }
})

// 修改获取图标的工具函数
export const getIcon = (name: string) => {
  // 如果是 IconXxx 格式，转换为 icon-xxx 格式
  const iconName = name.startsWith('Icon')
    ? name
        .replace(/([A-Z])/g, '-$1')
        .toLowerCase()
        .replace(/^-/, '')
    : name
  return iconMap.get(iconName)
}

interface IconWrapperProps {
  name: string
  size?: number | string
}

// 创建插件
export default {
  install(app: App) {
    // 注册全局属性
    app.config.globalProperties.$icon = getIcon

    // 注册全局组件
    app.component(
      'IconWrapper',
      defineComponent({
        props: {
          name: {
            type: String,
            required: true,
          },
          size: {
            type: [Number, String],
            default: 16,
          },
        },
        setup(props: IconWrapperProps) {
          return () => {
            const IconComponent = getIcon(props.name)
            return IconComponent ? h(IconComponent, { size: props.size }) : null
          }
        },
      }),
    )
  },
}

// 声明类型
declare module 'vue' {
  interface ComponentCustomProperties {
    $icon: typeof getIcon
  }
}
